<template>
	<view class="content">
		<!-- 菜单 -->
		<view class="top-warp">
			<me-tabs v-model="tabIndex" :tabs="tabs" :height="80" @change="tabChange"></me-tabs>
		</view>
		<mescroll-uni :fixed="false" top="100" height="100%" ref="mescrollRef" @init="mescrollInit" :up="upOption"
			@down="downCallback" @up="upCallback">
			<view class="process-item">
				<yzb-process :list="list" @click="toDetail" @onDelete="toDelete" @ensure="toEnsure"></yzb-process>
			</view>
		</mescroll-uni>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	import MescrollMixin from '@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js';
	export default {
		mixins: [MescrollMixin], // 使用mixin
		computed: {
			...mapState(['userInfo']),
		},
		data() {
			return {
				clickable: true,
				list: [],
				tabs: ["已投递","被查看","初筛","笔试","面试","录用","不合适"],
				tabIndex: 0 ,// tab下标
				upOption: {
					onScroll: true,
					auto: false, // 不自动加载
					noMoreSize: 10, //如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看; 默认5
					empty: {
						tip: '空空如也', // 提示
						icon: 'http://cdn.uviewui.com/uview/empty/data.png'
					}
				},
				query:{
					pageNo: 1,
					pageSize: 10,
					type:0,
					applyStatus:1,
				}
			};
		},
		
		filters: {
		},
		
		onLoad() {},

		onShow() {
			this.getApplyResponseList(1, 10)
		},

		methods: {
			
			toDetail(item){
				console.log("item===",item);
				uni.navigateTo({
					url:'/pages/user/process/processDetail?id='+item.id
				})
			},
			
			getApplyResponseList(pageNum, pageSize) {
				this.query.page=pageNum;
				this.query.limit=pageSize;
				this.$apis.getApplyResponseList(this.query).then(res => {
					console.log('getApplyResponseList', res);
					if (pageNum == 1) {
						this.list = [];
					}
					if (res) {
						let data = res.records;
						this.list = this.list.concat(data);
						this.mescroll.endSuccess(res.records.length);
					}
				});
			},
			
			// 切换菜单
			tabChange(index) {
				console.log("tabchange===",index);
				this.query.applyStatus=index+1;
				this.list = []// 先置空列表,显示加载进度
				this.mescroll.resetUpScroll() // 再刷新列表数据
			},
			
			/*下拉刷新的回调 */
			downCallback() {
				this.mescroll.resetUpScroll();
			},
			
			/*上拉加载的回调: 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 */
			upCallback(page) {
				// this.mescroll.endSuccess(2);
				this.getApplyResponseList(page.num, page.size);
			}
		}
	};
</script>

<style lang="scss">
	page {
		background-color: #f8f8f8;
	}
	.content {
		flex-direction: column;
		align-items: center;
		height: 100vh;
		box-sizing: border-box;
	}

	.top-warp {
		z-index: 9990;
		position: fixed;
		top: --window-top;
		/* css变量 */
		left: 0;
		width: 100%;
		background-color: white;
	}

	.top-warp .tip {
		font-size: 28upx;
		height: 60upx;
		line-height: 60upx;
		text-align: center;
	}


	.process-item {
		display: flex;
		flex-direction: column;
		margin-bottom: 20rpx;
		margin: 0 20upx;
	}
</style>